<template>
  <div>
    <div style="width: 99%;text-align: right;padding: 10px">
      <el-button type="default" @click="exportPdf">导出pdf</el-button>
      <el-button type="default" @click="exportWord">导出word</el-button>
    </div>
    <div id="focusHtml" class="focusHtml">
      <div>需要设置 model-value / v-model 属性，它接收 Boolean，当为 true 时显示 Dialog。 Dialog 分为两个部分：body 和 footer，footer 需要具名为 footer 的 slot。 title 属性用于定义标题，它是可选的，默认值为空。 最后，本例还展示了 before-close 的用法。</div>
      <div class="box">
        <div style="width: 100%;height: 300px" id="main"></div>
      </div>
      <VueOfficePdf
          src="TEST-1759116431968.pdf"
          style="height: 100vh;"
          @rendered="onRendered"
          @error="onError"
      />
    </div>
  </div>
</template>

<script>
import VueOfficePdf from "@vue-office/pdf";
import * as echarts from 'echarts';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf'
import MapTest from '../openLayers/index'
import htmlDocx from 'html-docx-js/dist/html-docx';
import FileSaver from 'file-saver';
export default {
  components: {
    MapTest,
    VueOfficePdf
  },
  data(){
    return{
      showImg: false,
      list: [{id: 1}],
      htmlBox: '',
      wordUrl: 'http://192.168.18.88:8012/pdfjs/web/viewer.html?file=http%3A%2F%2F192.168.18.88%3A8012%2FTEST-1759116431968.pdf&disablepresentationmode=false&disableopenfile=true&disableprint=false&disabledownload=false&disablebookmark=false'
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getDetails()
      setTimeout(() => {
        this.showImg = true
      },3000)
    })
  },
  methods: {
    getDetails(){
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };

      option && myChart.setOption(option);
    },
    exportPdf(){
      // 获取HTML元素
      const element = document.getElementById("focusHtml");
      const options = {
        dpi: 192,  //dpi属性的值为192，表示图像的分辨率
        scale: 2, //scale属性的值为2，表示图像的缩放比例。
        backgroundColor: "#F1F6FE",  //backgroundColor属性的值为"#F1F6FE"，表示图像的背景颜色。
        useCORS: true,// 【重要】开启跨域配置
        allowTaint: true,// 允许跨域图片
      };
      // 将元素转换为canvas对象
      html2canvas(element, options).then((canvas) => {
        let contentWidth = canvas.width;   //获取Canvas(上面元素id 'layout-wrapper')对象的宽度
        let contentHeight = canvas.height; //获取Canvas(上面元素id 'layout-wrapper')对象的高度
        // 创建jsPDF对象
        const pdf = new jsPDF('1', 'pt', [contentWidth, contentHeight]); //创建一个新的PDF对象，参数包括页面格式（'1'表示A4纸张）、单位（'pt'）和页面尺寸（[contentWidth, contentHeight]）
        let pageData = canvas.toDataURL('image/jpeg', 1.0);  //将Canvas对象转换为JPEG格式的数据，并将其存储在pageData变量中。1.0表示图片质量
        console.log(pageData)
        pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight);  //将JPEG格式的图片添加到PDF文件中，图片的左上角坐标为(0, 0)，宽度为contentWidth，高度为contentHeight
        pdf.save("test.pdf");
      });
    },
    exportWord(){
      const element = document.getElementById("focusHtml");
      console.log(element)

      const fullHtmlContent = `
        <!DOCTYPE html>
        <html>
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          </head>
          <body>
            ${element.innerHTML}
          </body>
        </html>
      `
      console.log(fullHtmlContent)
      const converted = htmlDocx.asBlob(fullHtmlContent);
      // 使用 file-saver 保存 Blob 对象为 Word 文档文件
      FileSaver.saveAs(converted, 'test.word');
    },
    // 3. 监听渲染事件
    onRendered(){
      console.log("🎉 PDF 文档渲染完成！");
    },

    onError(error){
      console.error("❌ 渲染 PDF 文档时出错:", error);
    }
  }
}
</script>

<style scoped>
.focusHtml{
  padding: 10px;
}
</style>